<template>
  <div>
    <div
      class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
      @click="openDrawer"
    >
      <Handle type="target" :position="Position.Left" />
      <div class="flex flex-col gap-y-1">
        <common-title-module />
        <CommonDisplayModule :title="data.reqmethod" value-name="vartype" :valueList="inputList" />
        <CommonDisplayModule title="输出" value-name="vartype" :valueList="data?.outputList" />
      </div>
      <Handle type="source" :position="Position.Right" />
    </div>
    <HttprequestDrawerModule
      ref="drawerRef"
      :title="node?.node?.label"
      :form="data"
      :dicGather="dicGather"
      @add="handleClickAddBtn"
      @remove="handleClickDeleteBtn"
      @cancel="onCancel"
    />
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core'

import { editNode } from '@/api/modules/flow'

import CommonTitleModule from '../modules/common-title-module.vue'
import CommonDisplayModule from '../modules/common-display-module.vue'
import HttprequestDrawerModule from '../modules/httprequest-drawer-module.vue'

const node = useNode()

const dicGather = ref([
  {
    name: 'Bearer Token',
    id: 'cfb2866d03c440eda916d00df03d6560',
    code: 'BearerToken'
  },
  {
    name: '自定义',
    id: '1b5412bc2fa0473580978946950024cf',
    code: 'customize'
  }
])

const data = ref({
  reqmethod: node.node.data.reqmethod || 'GET',
  url: node.node.data.url || '',
  isauthority: node.node.data.isauthority || false,
  reqbodytype: node.node.data.reqbodytype || '',
  reqbodyparam: node.node.data.reqbodyparam || '',
  filename: node.node.data.filename || '',
  timeout: node.node.data.timeout || 120,
  retrycount: node.node.data.retrycount || 3,
  isexepignore: node.node.data.isexepignore || false,
  bearertype: node.node.data.bearertype || dicGather.value[0].id,
  token: node.node.data.token || '',
  defoutput: node.node.data.defoutput || `{
  "body": "",
  "statusCode": 0,
  "headers": ""
}`,
  reqparamlist: node.node.data.reqparamlist || [],
  reqheadlist: node.node.data.reqheadlist || [],
  customizevo: node.node.data.customizevo || {
    key: '',
    value: '',
    addTo: 'Header',
    datatype: 'String'
  },
  outputList: [
    {
      varname: 'body',
      vartype: 'String'
    },
    {
      varname: 'statusCode',
      vartype: 'String'
    },
    {
      varname: 'headers',
      vartype: 'String'
    },
    {
      varname: 'errorBody',
      vartype: 'Object',
      children: [
        {
          varname: 'errorMessage',
          vartype: 'String'
        },
        {
          varname: 'errorCode',
          vartype: 'String'
        }
      ]
    }
  ]
})

const inputList = computed(() => {
  return [
    {
      varname: data.value.url,
      varparam: data.value.url,
      vartype: 'String'
    }
  ]
})

const drawerRef = ref(null)
const openDrawer = () => {
  drawerRef.value?.init()
}

function handleClickAddBtn(listKey) {
  data.value[listKey].push({
    varname: '',
    varparam: '',
    vartype: 'String'
  })
  node.node.data = {
    ...node.node.data,
    output: data
  }
}

function handleClickDeleteBtn(listKey, index) {
  data.value[listKey].splice(index, 1)
  node.node.data = {
    ...node.node.data,
    output: data
  }
}

const onCancel = () => {
  const bearerRow = dicGather.value.find(item=>item.id === data.value.bearertype)

  editNode({ 
    data: { 
      id: node.id,
      bearertypename: bearerRow.code,
      ...data.value
    } 
  })
}
</script>
